<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商品立即购买</title>
		<link rel="stylesheet" href="../libs/mui/mui.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<style>
			.mui-content{font-size: 16px;}
			b{color: #ff043f;}
		 	/*收货地址*/
		 	.mui-table-view.mui-grid-view .mui-table-view-cell{padding: 7px 15px;text-align: left;width: 100%;}
		 	.mui-table-view.mui-grid-view .mui-table-view-cell:nth-child(1){padding: 5px 35px;padding-top: 10px!important;font-size: 16px;}
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width: 10%;float: left;}
			.mui-table-view .mui-media-object.mui-pull-left{font-size: 25px;line-height: 35px;}			
			/*图片*/
			.mui-table-view-cell>a:not(.mui-btn){white-space:normal}
			.mui-table-view .mui-media-object {line-height: 47px;max-width: 95px;height: 95px;}
			/*备注*/   		 						
			.mui-input-row label{width: 30%;}
			.mui-input-row label~input{width: 70%;}
			/*弹窗*/
            .popover{display:none;background-color: rgba(0,0,0,.3);position:fixed;top:0;bottom: 0;right: 0;left: 0;z-index: 99;}
            .mui-btn.mui-btn-block{padding-bottom: 10px;padding-top:10px}
            .mui-btn-block:nth-child(1){border-radius: 5px 5px 0 0;margin-bottom: 0;border:0;}
            .mui-btn-block:nth-child(2){margin: 0;}
            .mui-btn-block:nth-child(3){border:0;border-radius: 0 0 5px 5px;}
            .mui-btn-block:nth-child(4){border-radius: 5px;border:none !important;}
            .btn{display: none;position:fixed;z-index: 99;width:90%;left: 5%;right: 5%;bottom: 20px;}
            .btn>.mui-btn-block{color:#39acff;} 
             /*支付密码弹窗 start*/
			
			.password-of-pay-wraper {
			  display: none;
			  width: 80%;
			  height: 180px;
			  background-color: #fff;
			  position: fixed;
			  left: 10%;
			  top: 50%;
			  margin-top: -90px;
			  border-radius: 5px;
			  z-index: 1002;
			}
			
			#password_backdrop {
			  position: fixed;
			  z-index: 999;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  left: 0;
			  -webkit-transition-duration: 400ms;
			  -moz-transition-duration: 400ms;
			  transition-duration: 400ms;
			  opacity: 1;
			  -webkit-opacity: 1;
			  -moz-opacity: 1;
			  -khtml-opacity: 1;
			  filter: alpha(opacity=100);
			  background: rgba(0, 0, 0, .4);
			  display: none;
			}
			
			.password-of-pay-top {
			  width: 100%;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  color: #757575;
			  border-bottom: 1px solid #e1e1e1;
			  position: relative;
			}
			
			.password-of-pay-top .close-btn {
			  width: 28px;
			  height: 28px;
			  line-height: 28px;
			  text-align: center;
			  position: absolute;
			  top: 4px;
			  left: 10px;
			  font-size: 16px;
			}
			
			.password-of-pay-body {
			  width: 100%;
			  padding-top: 40px;
			}
			
			.password-of-pay-body form {
			  width: 210px;
			  background-color: #f30;
			  margin: 0 auto;
			  position: relative;
			}
			
			.password-of-pay-body input[type="password"] {
			  float: left;
			  width: 35px;
			  height: 35px;
			  line-height: 35px;
			  text-align: center;
			  font-size: 24px;
			  padding: 0;
			  margin: 0;
			  border-radius: 0;
			}
			
			.password-of-pay-body form input[type="password"]+ input[type="password"] {
			  border-left: 0;
			}
			
			
			/*支付密码弹窗 end*/ 
		</style>
	</head>
	<body>
		<!--头部导航-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">立即购买</h1>			
		</header>
		<!--底部导航-->
		<nav class="navtab mui-bar mui-bar-tab">
			<div></div>
			<div class="mui-col-xs-8 mui-pull-left combined">
				<span>合计：￥<b class="goods_total">0.00</b></span>							
			</div>
			<div class="mui-col-xs-4 mui-pull-right Good flea" data-stoart_id="">
				<a>
					<span class="submit">提交订单</span>
				</a>
			</div>
		</nav>
		<!--中间导航-->
		<div class="mui-content">	
			<div class="Submit">
				<ul class="mui-table-view mui-grid-view">
					<li class="mui-table-view-cell">
				        <div class="mui-media-body">
				        	<span class="true_name"></span>
							<span class="mui-pull-right mob_phone"></span>
				        </div>
					</li>
					<li class="mui-table-view-cell">
					    <a class="mui-navigate-right" onclick="myaddr()">
					    	<div class="mui-col-xs-11">
								<i class="mui-icon iconfont mui-pull-left mui-media-object">&#xe61e;</i>							
								<p class="mui-ellipsis-2"><span class="address"></span></p>
							</div>
					    </a>
					</li>
				</ul>
			</div>				
			<div class="shopping">
				<div class="goods_list">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left goods_image" src="">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2 goods_name"></div>
									<p class="mui-ellipsis1" style="padding: 3px 0 9px;">
										<span class="goods_spec"></span>							
									</p>
									<p class="botm">
										<b class="red">￥<span class="goods_price"></span></b>
										<span class="font10 mui-pull-right gray goods_num"></span>
									</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">						
						<span>运费</span>
						<span class="mui-pull-right gray goods_freight"></span>										
					</li>					
				</ul>
				<div class="mui-table-view">
					<div class="mui-input-row">
						<label>备注：</label>
						<input type="text" class="remarks" placeholder="选填：对本次交易的说明"/>					
					</div>					
				</div>
			</div>
		</div>
		<!--弹窗--> 
		<div class="popover"></div> 
		<div class="btn" id="j_payway_form">
			<button type="button" ta-payway="yu-e-pay" class="mui-btn  mui-btn-block payment" payment_code="balance"  pay_sn=""  order_id="">余额支付</button>
			<button type="button" ta-payway="yu-e-pay" class="mui-btn  mui-btn-block payment" payment_code="alipay" pay_sn="" order_id="">支付宝支付</button>
			<button type="button" ta-payway="yu-e-pay" class="mui-btn  mui-btn-block payment" payment_code="wxpay"  pay_sn=""  order_id="">微信支付</button>
			<button type="button" ta-payway="yu-e-pay" class="mui-btn  mui-btn-block off">取消</button>
		</div>
		<!--/*支付密码弹窗 start*/-->
			<div class="password-of-pay-wraper" id="j_password_of_pay">
				<div class="password-of-pay-top">
					<p>请输入支付密码</p>
					<div class="close-btn" id="j_close_tn">X</div>
				</div>
				<div class="password-of-pay-body">
					<form action="#" class="mui-clearfix">
						<input type="password" id="pwd1" maxlength="1" />
						<input type="password" id="pwd2" maxlength="1" />
						<input type="password" id="pwd3" maxlength="1" />
						<input type="password" id="pwd4" maxlength="1" />
						<input type="password" id="pwd5" maxlength="1" />
						<input type="password" id="pwd6" maxlength="1" />
					</form>		
				</div>
			</div>
			<div id="password_backdrop"></div>
			<!--/*支付密码弹窗 end*/-->
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/open.js"></script>
	<script src="../js/appconfig.js"></script>
	<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
	<script type="text/javascript" src="../js/web_js/public.js"></script>
	<script type="text/javascript" src="../js/web_js/goods.js"></script>
	<script type="text/javascript" src="../js/web_js/pay.js"></script>
	<script>
//		$('.Good').on('tap',function(){
//			$('.popover').show();
//			$('.btn').slideDown()
//		});
		$('.off').on('tap',function(){
			$('.popover').fadeOut();
			$('.btn').slideUp()
			toast('已取消付款，订单已生成！');
		});
		//点击支付密码弹窗的"关闭"按钮所处理业务
		$("#j_close_tn").on("tap",function (){
			toast("取消支付,订单已生成！");
			$("#j_password_of_pay").hide();
			tool.shade().hide();
			$('.popover').fadeOut();
//			$('#password_backdrop').css("display","none");
		});
	</script>
</html>